<template>
    <div class="params">
        <el-form
            ref="operateForm"
            :rules="operateFormRule"
            :model="operateForm"
            label-width="125px"
            v-loading="tab1Loading"
            element-loading-background="rgba(0, 0, 0, 0.1)"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            size="small"
            :inline="true"
        >
            <el-card class="platform-card">
                <div slot="header" class="card-head">
                    <span>参数</span>
                    <div>
                        <el-button
                            type="success"
                            size="mini"
                            :loading="refresh1Loading"
                            @click="doRefresh(1)"
                            >手动刷新</el-button
                        >
                        <el-button
                            type="primary"
                            size="mini"
                            :loading="setting1Loading"
                            @click="doSetParam"
                            >设置</el-button
                        >
                    </div>
                </div>
                <el-form-item label="总功率限制值(kw)">
                    <el-input-number
                        class="input-width"
                        :step="1"
                        :precision="0"
                        controls-position="right"
                        v-model="boxForm['07010007']"
                        placeholder="请输入总功率限制值"
                        :min="0"
                        :max="65000"
                    ></el-input-number>
                </el-form-item>

                <el-form-item label="充电堆类型">
                    <el-select
                        class="input-width"
                        v-model="boxForm['07010008']"
                        placeholder="请选择充电堆类型"
                    >
                        <el-option
                            v-for="item in CHARGING_TYPE"
                            :key="item.code"
                            :label="item.label"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备SN码">
                    <el-input
                        class="input-width"
                        clearable
                        v-model="boxForm['07010042']"
                        placeholder="请输入设备SN码"
                    ></el-input>
                </el-form-item>
            </el-card>
            <el-card class="platform-card">
                <div slot="header" class="card-head">
                    <span>升级平台链接参数</span>
                    <div>
                        <!-- <el-button
                            type="success"
                            size="small"
                            :loading="refresh2Loading"
                            @click="doRefresh(2)"
                            >手动刷新</el-button
                        > -->
                        <el-button
                            type="primary"
                            size="mini"
                            :loading="setting2Loading"
                            @click="doRunParam"
                            >设置</el-button
                        >
                    </div>
                </div>
                <el-form-item label="服务地址" prop="url">
                    <el-input
                        class="input-width"
                        clearable
                        v-model="operateForm.url"
                        placeholder="请输入服务地址"
                    ></el-input>
                </el-form-item>
                <el-form-item label="端口" prop="port">
                    <el-input
                        class="input-width"
                        clearable
                        v-model="operateForm.port"
                        placeholder="请输入端口"
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input
                        class="input-width"
                        clearable
                        v-model="operateForm.username"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        class="input-width"
                        clearable
                        v-model.trim="operateForm.password" @input="operateForm.password = operateForm.password.replace(/[\u4E00-\u9FA5]/g,'')"
                        placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="产品密钥" prop="productKey">
                    <el-input
                        class="input-width"
                        clearable
                        v-model.trim="operateForm.productKey" @input="operateForm.productKey = operateForm.productKey.replace(/[\u4E00-\u9FA5]/g,'')"
                        placeholder="请输入产品密钥"
                    ></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="deviceName">
                    <el-input
                        class="input-width"
                        clearable
                        v-model="operateForm.deviceName"
                        placeholder="请输入设备名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="设备密钥" prop="deviceSecret">
                    <el-input
                        class="input-width"
                        clearable
                        v-model.trim="operateForm.deviceSecret" @input="operateForm.deviceSecret = operateForm.deviceSecret.replace(/[\u4E00-\u9FA5]/g,'')"
                        placeholder="请输入设备密钥"
                    ></el-input>
                </el-form-item>
            </el-card>
        </el-form>
    </div>
</template>
<script>
import { handleConfirm } from "@/utils/messageBox";
import { CHARGING_TYPE } from "@/utils/config";

import { removeNullUndefined } from "@/utils/index.js";
import { equipment } from "@/api/factuer";
export default {
    props: {
        currentRow: {
            typeof: Object,
            default: () => {},
        },
        CSParamVisible: {
            typeof: Boolean,
            default: false,
        },
    },
    data() {
        return {
            operateForm: {
                deviceName: "",
                deviceSecret: "",
                password: "",
                port: "",
                productKey: "",
                url: "",
                username: "",
            },
            operateFormRule: {
                url: [
                    {
                        required: true,
                        message: "请输入服务地址",
                        trigger: "blur",
                    },
                ],
                port: [
                    { required: true, message: "请输入端口", trigger: "blur" },
                ],
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                productKey: [
                    {
                        required: true,
                        message: "请输入产品密钥",
                        trigger: "blur",
                    },
                ],
                deviceName: [
                    {
                        required: true,
                        message: "请输入设备名称",
                        trigger: "blur",
                    },
                ],
                deviceSecret: [
                    {
                        required: true,
                        message: "请输入设备密钥",
                        trigger: "blur",
                    },
                ],
            },
            CHARGING_TYPE: CHARGING_TYPE,

            setting1Loading: false,
            setting2Loading: false,
            refresh1Loading: false,
            refresh2Loading: false,

            tab1Loading: false,
            boxForm: {
                "07010007": undefined,
                "07010008": undefined,
                "07010042": undefined,
            },
        };
    },
    watch: {
        CSParamVisible: {
            handler(value) {
                if (value) {
                    this.tab1Loading = true;
                    this.doRead();
                } else {
                    //弹框关闭，数据重置
                    this.resetData();
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        resetData() {
            for (let i in this.boxForm) {
                this.boxForm[i] = undefined;
            }
            for (let i in this.operateForm) {
                this.operateForm[i] = undefined;
            }
            this.setting1Loading = false;
            this.setting2Loading = false;
            this.refresh1Loading = false;
            this.refresh2Loading = false;

            this.tab1Loading = false;
            this.$refs["operateForm"].resetFields();
        },
        // 刷新
        doRefresh(index) {
            handleConfirm(`确定要刷新吗？`, "warning", "提示")
                .then((res) => {
                    this.refresh1Loading = true;
                    this.doRead(index);
                })
                .catch((err) => {});
        },
        doRead(index) {
            let params = {
                entitys: [],
                equipId: this.currentRow.id,
            };
            for (const key in this.boxForm) {
                params.entitys.push({ id: key });
            }
            // switch (index) {
            //     case 1:
            //         this.refresh1Loading = true;
            //         for (const key in this.boxForm) {
            //             params.entitys.push({ id: key });
            //         }
            //         break;
            // case 2:
            //     this.$refs["operateForm"].resetFields();
            //     this.refresh2Loading = true;
            //     for (const key in this.operateForm) {
            //         params.entitys = [
            //             { id: "06010049" },
            //             { id: "06010050" },
            //         ];
            //     }
            //     break;
            // default:
            //     this.tab1Loading = true;
            //     for (const key in this.operateForm) {
            //         params.entitys = [
            //             { id: "06010049" },
            //             { id: "06010050" },
            //         ];
            //     }
            //     for (const key in this.boxForm) {
            //         params.entitys.push({ id: key });
            //     }
            // }

            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;

                    for (const key in this.boxForm) {
                        datas.forEach((item) => {
                            if (key == item.id) {
                                this.boxForm[key] = item.value;
                            }
                        });
                    }
                })
                .finally(() => {
                    this.tab1Loading = false;
                    this.refresh1Loading = false;
                    this.refresh2Loading = false;
                });
        },
        // 运营平台链接参数
        doRunParam() {
            this.$refs["operateForm"].validate((valid) => {
                if (valid) {
                    handleConfirm(`确定要设置吗？`, "warning", "提示")
                        .then((res) => {
                            this.setting2Loading = true;
                            equipment(
                                `/control/op/connectionparam/${this.currentRow.id}`,
                                "post",
                                { ...removeNullUndefined(this.operateForm) },
                                1
                            )
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$message.success(res.message);
                                    }
                                })
                                .finally(() => (this.setting2Loading = false));
                        })
                        .catch((err) => {});
                } else {
                    return false;
                }
            });
        },
        doSetParam() {
            let params = {
                entitys: [],
                equipId: this.currentRow.id,
            };
            for (const key in this.boxForm) {
                if (this.boxForm[key] || this.boxForm[key] == "0") {
                    params.entitys.push({
                        id: key,
                        value: this.boxForm[key],
                    });
                }
            }

            if (params.entitys.length == 0) {
                this.$message.error("请输入要设置的参数值！");
                return;
            }

            handleConfirm("确定要设置吗？", "warning", "提示")
                .then((res) => {
                    this.setting1Loading = true;
                    equipment("/operate/param/write", "post", params, 1)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.message);
                            }
                        })
                        .finally(() => {
                            this.setting1Loading = false;
                        });
                })
                .catch((err) => {});
        },
    },
};
</script>
<style scoped lang="scss">
@import "@/styles/common.scss";
.platform-card {
    margin-top: 10px;
    ::v-deep .el-card__header {
        padding: 6px 10px;
    }
    ::v-deep .el-card__body {
        padding-bottom: 0;
    }
    .card-head {
        @include flexLayout(center, space-between);
    }
    .input-width {
        width: 205px;
    }
}
</style>
